<template>
  <s-layout :bgStyle="{ color: '#FFF' }" class="set-wrap" title="选择门店">
    <view class="store-list">
      <view
        class="store-item"
        v-for="store in state.storeList"
        :key="store.id"
        @click="selectStore(store)"
      >
        <view class="store-logo">
          <image :src="store.logo" mode="aspectFill"></image>
        </view>
        <view class="store-info">
          <view class="store-name">{{ store.name }}</view>
          <view class="store-address">{{ store.detailAddress }}</view>
          <view class="store-phone">{{ store.phone }}</view>
          <view v-if="store.distance" class="store-distance">距离：{{ store.distance }} 公里</view>
        </view>
      </view>
    </view>
  </s-layout>
</template>
<script setup name="storesIndex">
  import DeliveryApi from '@/sheep/api/trade/delivery';
  import sheep from '@/sheep';
  import { onMounted, reactive } from 'vue';

  const LONGITUDE = 'user_longitude';
  const LATITUDE = 'user_latitude';
  const state = reactive({
    loaded: false,
    loading: false,
    storeList: [],
    system_store: {},
    locationShow: false,
    user_latitude: 0,
    user_longitude: 0,
  });

  onMounted(() => {
    state.user_latitude = uni.getStorageSync(LATITUDE);
    state.user_longitude = uni.getStorageSync(LONGITUDE);
    if (state.user_latitude && state.user_longitude) {
      getList();
    } else {
      selfLocation();
    }
  });

  const selfLocation = () => {
    // #ifdef H5
    const jsWxSdk = sheep.$platform.useProvider('wechat').jsWxSdk;
    if (jsWxSdk.isWechat()) {
      jsWxSdk.getLocation((res) => {
        state.user_latitude = res.latitude;
        state.user_longitude = res.longitude;
        uni.setStorageSync(LATITUDE, res.latitude);
        uni.setStorageSync(LONGITUDE, res.longitude);
        getList();
      });
    } else {
      // #endif
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          try {
            state.user_latitude = res.latitude;
            state.user_longitude = res.longitude;
            uni.setStorageSync(LATITUDE, res.latitude);
            uni.setStorageSync(LONGITUDE, res.longitude);
          } catch (e) {
            console.error(e);
          }
          getList();
        },
        complete: () => {
          getList();
        },
      });
      // #ifdef H5
    }
    // #endif
  };

  /**
   * 获取门店列表数据
   */
  const getList = async () => {
    if (state.loading || state.loaded) {
      return;
    }
    state.loading = true;
    const { data, code } = await DeliveryApi.getDeliveryPickUpStoreList({
      latitude: state.user_latitude,
      longitude: state.user_longitude,
    });
    if (code !== 0) {
      return;
    }
    state.loading = false;
    state.storeList = data;
  };

  const selectStore = (store) => {
    sheep.$store('selectStore').setSelect(store);
    uni.navigateBack();
  };
</script>
<style scoped>
.set-wrap {
  padding: 20px;
  background-color: #f8f8f8;
}

.store-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.store-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.store-logo {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.store-logo image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-info {
  flex: 1;
}

.store-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.store-address {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.store-phone {
  font-size: 14px;
  color: #333;
}
.store-distance {
  font-size: 14px;
  color: #666;
}
</style>